<template>
  <!-- 智慧预算 -->
  <div class="wisBudget-box">
    <el-row :gutter="20">
      <el-col :span="12">
        <NewCard title="预算科目" :border="false">
            <el-table
                ref="subjectTable"
                :data="subjectData"
                style="width: 100%">
                <el-table-column width="50">
                    <template slot-scope="scope">
                        <i class="el-icon-remove removeIcon" @click="removeSub(scope.row)"></i>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column property="name" label="预算科目" width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入预算科目" class="editInput" @blur="subjectBlur(scope.row)"></el-input>
                  </template>
                </el-table-column>
                <el-table-column property="definition" label="定义">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.definition" placeholder="请输入预算科目" class="editInput" @blur="subjectBlur(scope.row)"></el-input>
                  </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination
                  @size-change="subjectSizeChange"
                  @current-change="subjectCurrentChange"
                  :current-page="subjectPage.pageNum"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="subjectPage.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="subjectPage.total">
                </el-pagination>
            </div>

            <!-- 底部 -->
            <div class="bottomBtn">
                <el-button @click="clickSubBtn" v-if="subBtnShow">+ 添加科目</el-button>
                <template v-else>
                    <div class="footerBox">
                        <el-input
                          v-model="subObj.name"
                          placeholder="请输入科目"
                          ref="bottBtn">
                        </el-input>
                        <el-input
                          v-model="subObj.definition"
                          placeholder="请输入定义"
                          ref="bottBtn">
                        </el-input>
                        <div class="box-button">
                        <el-button type="primary" round @click="subEntityFn">保存</el-button>
                        <el-button round @click="resetSub">取消</el-button>
                        </div>
                    </div>
                </template>
            </div>
        </NewCard>
      </el-col>
      <el-col :span="12">
        <NewCard title="指标名称" :border="false">
          <el-table
                ref="targetTable"
                :data="targetData"
                style="width: 100%">
                <el-table-column width="50">
                    <template slot-scope="scope">
                        <i class="el-icon-remove removeIcon" @click="removeTar(scope.row)"></i>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column property="name" label="指标名称" width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入指标名称" class="editInput" @blur="targetBlur(scope.row)"></el-input>
                  </template>
                </el-table-column>
                <el-table-column property="definition" label="定义">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.definition" placeholder="请输入预算科目" class="editInput" @blur="targetBlur(scope.row)"></el-input>
                  </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination
                  @size-change="targetSizeChange"
                  @current-change="targetCurrentChange"
                  :current-page="targetPage.pageNum"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="targetPage.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="targetPage.total">
                </el-pagination>
            </div>

            <!-- 底部 -->
            <div class="bottomBtn">
                <el-button @click="clickTarBtn" v-if="tarBtnShow">+ 添加科目</el-button>
                <template v-else>
                    <div class="footerBox">
                        <el-input
                          v-model="tarObj.name"
                          placeholder="请输入科目"
                          ref="bottBtn">
                        </el-input>
                        <el-input
                          v-model="tarObj.definition"
                          placeholder="请输入定义"
                          ref="bottBtn">
                        </el-input>
                        <div class="box-button">
                        <el-button type="primary" round @click="tarEntityFn">保存</el-button>
                        <el-button round @click="resetTar">取消</el-button>
                        </div>
                    </div>
                </template>
            </div>
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import { getBudgetSubjectListApi,editBudgetSubjectApi,addBudgetSubjectApi,removeBudgetSubjectApi,getBudgetTargetListApi,addBudgetTargetApi,editBudgetTargetApi,removeBudgetTargetApi } from "@/wss/newApi_3-24/tool/budget.js"
export default {
    name:'wisBudget',
    components:{
        NewCard
    },
    data(){
      return{
        // ---------预算科目----------
        subjectData:[], //预算科目的表格数据
        //分页参数
        subjectPage: { pageNum: 1, pageSize: 10, total: 0 },
        subBtnShow: true,// 预算科目添加按钮
        // 预算科目添加
        subObj:{
          name: '', //名字
          definition: '', //定义
          type: '0',//默认标准科目
        },
        // ---------预算科目----------end

        // ---------指标名称----------
        targetData:[], //指标名称的表格数据
        //分页参数
        targetPage: { pageNum: 1, pageSize: 10, total: 0 },
        tarBtnShow: true,// 预算科目添加按钮
        // 预算科目添加
        tarObj:{
          name: '', //名字
          definition: '', //定义
        },
        // ---------指标名称----------end
        
      }
    },
    mounted(){
      this.getBudgetSubjectList() //获取预算科目
      this.getBudgetTargetList() //获取指标名称
    },
    methods:{
      // ------------------------------预算科目------------------------------
      // 分页器
      subjectSizeChange(val) {
          this.subjectPage.pageSize = val;
          this.getBudgetSubjectList() //获取预算科目
      },
      subjectCurrentChange(val) {
          this.subjectPage.pageNum = val;
          this.getBudgetSubjectList() //获取预算科目
      },
      // 分页器 end

      // 获取预算科目
      async getBudgetSubjectList(){
        let {pageNum,pageSize,total} = this.subjectPage
        let type = '0'
        let result = await getBudgetSubjectListApi({pageNum,pageSize,total,type})
        if(result.code==200){
          // 过滤出标准科目
          let list = result.rows.filter(item=>{
            if(!item.serviceId && item.type == '0'){
              return item
            }
          })
          this.subjectData = list
          this.subjectPage.total = list.length
        }
      },

      // 点击添加预算科目
      clickSubBtn(){
        this.subBtnShow = false
      },

      // 预算科目保存
      subEntityFn(){
        if(this.subObj.name == ''){
          this.$message({type: "warning",message: '预算科目不能为空',});
          return
        }
        this.addBudgetSubject(this.subObj)
      },

      // 添加预算科目
      async addBudgetSubject(obj){
        let result = await addBudgetSubjectApi(obj)
        if(result.code==200){
          this.$message({type: "success",message: '添加成功',});
          this.getBudgetSubjectList() //重新获取预算科目
          this.resetSub() //关闭并清空
        }
      },

      // 预算科目取消
      resetSub(){
        this.subObj = {
          name: '',
          definition: '',
          type: '0'
        }
        this.subBtnShow = true
      },

      // 输入框失去焦点 修改
      subjectBlur(row){
        let obj = JSON.parse(JSON.stringify(row))
        obj.type = '0'
        this.editBudgetSubject(obj)
      },

      // 修改预算科目
      async editBudgetSubject(obj){
        let result = await editBudgetSubjectApi(obj)
        if(result.code==200){
          this.$message({type: "success",message: '编辑成功',});
          this.getBudgetSubjectList() //重新获取预算科目
        }
      },

      // 删除一条
      removeSub(row){
        this.removeBudgetSubject(row.id)
      },

      // 删除一条的接口
      async removeBudgetSubject(id){
        let result = await removeBudgetSubjectApi(id)
        if(result.code==200){
          this.$message({type: "success",message: '删除成功',});
          this.getBudgetSubjectList() //重新获取预算科目
        }
      },
      // ------------------------------预算科目------------------------------end

      // ------------------------------指标名称------------------------------
      // 分页器
      targetSizeChange(val) {
        this.targetPage.pageSize = val;
        this.getBudgetTargetList() //获取指标名称
      },
      targetCurrentChange(val) {
        this.targetPage.pageNum = val;
        this.getBudgetTargetList() //获取指标名称
      },
      // 分页器 end

      // 获取指标名称
      async getBudgetTargetList(){
        let result = await getBudgetTargetListApi(this.targetPage)
        if(result.code==200){
          this.targetData = result.rows
          this.targetPage.total = result.total
        }
      },

      // 点击添加指标名称
      clickTarBtn(){
        this.tarBtnShow = false
      },

      // 指标名称保存
      tarEntityFn(){
        if(this.tarObj.name == ''){
          this.$message({type: "warning",message: '指标名称不能为空',});
          return
        }
        this.addBudgetTarget(this.tarObj)
      },

      // 添加指标名称
      async addBudgetTarget(obj){
        let result = await addBudgetTargetApi(obj)
        if(result.code==200){
          this.$message({type: "success",message: '添加成功',});
          this.getBudgetTargetList() //重新获取指标名称
          this.resetTar() //关闭并清空
        }
      },

      // 指标名称取消
      resetTar(){
        this.tarObj = {
          name: '',
          definition: '',
        }
        this.tarBtnShow = true
      },

      // 输入框失去焦点 修改
      targetBlur(row){
        let obj = JSON.parse(JSON.stringify(row))
        obj.type = '0'
        this.editBudgetTarget(obj)
      },

      // 修改指标名称
      async editBudgetTarget(obj){
        let result = await editBudgetTargetApi(obj)
        if(result.code==200){
          this.$message({type: "success",message: '编辑成功',});
          this.getBudgetTargetList() //重新获取指标名称
        }
      },

      // 删除一条
      removeTar(row){
        this.removeBudgetTarget(row.id)
      },

      // 删除一条的接口
      async removeBudgetTarget(id){
        let result = await removeBudgetTargetApi(id)
        if(result.code==200){
          this.$message({type: "success",message: '删除成功',});
          this.getBudgetTargetList() //重新获取指标名称
        }
      },
      // ------------------------------指标名称------------------------------end
    },
}
</script>

<style lang="scss" scoped>
h3,
p,
ul,
li,
i {
  margin: 0;
  padding: 0;
}

.wisBudget-box {
  height: calc(100% - 60px);
  .el-row {
    height: 100%;
    margin-bottom: 0;
    .el-col {
      height: 100%;
      .el-card{
        position: relative;
      }
    }
  }
}

.removeIcon{
  color: #999;
  cursor: pointer;
}


// 底部按钮
.bottomBtn {
  .footerBox {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    border-top: 1px solid #ecedf0;
    padding: 5px 0;
    box-sizing: border-box;

    .el-input {
      width: 150px;
      margin-right: 10px;
    }

    .box-button {
      display: flex;

      .el-button.el-button--primary {
        border: 1px solid #f87a23;
        background-color: #f87a23;
        color: #ffffff;
        width: 80px;
        height: 34px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        padding: 0;
      }
      ::v-deep .el-button--default {
        background-color: #ffffff;
        width: 80px;
        height: 34px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #606e84;
        padding: 0;
        border: 1px solid #ecedf0;
      }
    }
  }
  .addStaff {
    .el-input {
      width: 18%;
      margin-right: 5px;
    }
  }
}
</style>
<style scoped>
.wisBudget-box >>> .el-card__body{
  height: 100%;
}
.wisBudget-box >>> .el-card__body>div{
  height: calc(100% - 45px);
  overflow-y: auto;
}

/* 表格样式 */
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  padding: 5px 0;
  /* border-bottom: 0; */
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
.pagination {
  margin-top: 20px;
  margin-bottom: 50px;
  text-align: center;
}
/* 表格样式 end */

.editInput >>> .el-input__inner{
  border: 0;
  background-color: transparent;
  padding: 0;
}

/* 添加按钮 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 40px;
  line-height: 40px;
}
/* 添加按钮end */
</style>